<template>
  <div>
    <div class="login">
      <div class="login-top">
        <div class="fl">
          <img src="~assets/image/logo.png"
               @click="toHome" />
        </div>
        <div class="fr">
          <h2>欢迎登陆在线医药购买系统</h2>
        </div>
      </div>
      <el-divider><i class="el-icon-mobile-phone"></i></el-divider>

      <!-- 卡片视图 -->
      <div class="login-main">
        <el-card class="box-card"
                 style="background: #f2ecff">
          <el-page-header @back="goBack"
                          content="登陆页面"> </el-page-header>

          <div class="login-fl">
            <div class="conlist">
              <div v-if="!isIdentitied"
                   class="identTag clearfix">
                <el-button style="float: left"
                           type="text"
                           @click="login('用户')">用户登陆</el-button>
                <el-button style="float: right"
                           type="text"
                           @click="login('商家')">
                  商家登陆</el-button>
              </div>
              <div v-if="isIdentitied"
                   class="identTag">
                <el-tag>{{ identity }}</el-tag>
              </div>
              <el-form style="width: 300px"
                       label-width="80px"
                       ref="customerForm"
                       :model="form">
                <el-form-item prop="userId"><template v-slot:label>用户名&nbsp;<i class="el-icon-user"></i></template>
                  <el-input v-model="form.userId"
                            placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item prop="userPassword">
                  <template v-slot:label>密 码：<i class="el-icon-lock"></i></template>
                  <el-input v-model="form.userPassword"
                            placeholder="请输入密码"
                            show-password></el-input>
                </el-form-item>
              </el-form>

              <div class="safe">
                <el-button style="float: left"
                           type="text"
                           @click="goToRegister">立刻注册</el-button>
                <el-button style="float: right"
                           type="text"
                           @click="openPasswordDialog">忘记密码？</el-button>
              </div>
              <div class="login-botton">
                <el-button style="width: 90%; background: #e4393c; border: 0"
                           type="primary"
                           @click="onSubmit">登陆</el-button>
              </div>
            </div>
          </div>

          <div class="login-fr">
            <img src="~assets/image/login-pic.jpg"
                 width="507"
                 height="325" />
          </div>
        </el-card>
      </div>
    </div>
    <!-- 找回密码对话框 -->
    <password-dialog ref="passwordDialog"></password-dialog>
  </div>
</template>

<script>
import passwordDialog from './components/passwordDialog.vue'
import { request } from 'network/request.js'

export default {
  components: { passwordDialog },
  data() {
    return {
      formLabelWidth: '120px',
      tabName: 'customer',
      form: {
        userId: '',
        userPassword: '',
      },
      findPasswordForm: {
        name: '',
        phone: '',
        number: '',
        password: '',
        newPassword: '',
      },
      identity: '',
      isIdentitied: false,
    }
  },

  mounted() {
    window.addEventListener('beforeunload', (_) => {
      sessionStorage.setItem('count', this.$store.state.count)
    })
  },

  methods: {
    login(identity) {
      this.identity = identity
      this.isIdentitied = true
    },

    toHome() {
      this.$router.push('/home')
    },
    goBack() {
      this.$router.push('/home')
    },
    goToRegister() {
      this.$router.push('/register')
    },
    async onSubmit() {
      const { userId, userPassword } = this.form
      const { code, count } = await request({
        url: '/account',
        params: { userId, userPassword },
      })

      if (code !== 1) {
        return this.$message({
          type: 'error',
          message: res.message,
        })
      }
      // 登陆成功，存储信息于vuex,购物车数量，登录状态
      this.$store.commit('getCount', count)
      this.$store.commit('$_setLogin', userId)
      if (this.identity !== '商家') {
        this.$router.push({
          path: '/home',
        })
      } else {
        this.$router.push({
          path: '/seller',
        })
      }
    },
    openPasswordDialog() {
      this.$refs.passwordDialog.open()
    },
  },
}
</script>

<style lang="less" scoped>
.login {
  width: 80%;
  margin: 0 auto;
  .login-top {
    height: 120px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 10px;
  }
  .login-main {
    height: 650px;
    margin: 40px auto;
    border: 1px solid #ddd;
    box-shadow: 1px 2px 7px #ddd;
    background-color: #e93854;
    .conlist {
      width: 350px;
      padding: 10px;
      border: 1px solid #ddd;
      .identTag {
        width: 300px;
        margin: 0 auto;
      }
    }
    .login-fl {
      height: 600px;
      float: left;
      margin: 30px auto auto 140px;
      text-align: center;
      .el-form {
        margin: 10px auto;
      }
      .el-input {
        width: 200px;
      }
      .safe {
        width: 300px;
        margin: 30px auto;
      }
    }
    .login-fr {
      float: right;
    }
  }
}
</style>
